<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>统计信息</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <script type="text/javascript" src="/js/echarts.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>

<div>
    <div id="sex" style="width: 600px;height:400px;"></div>
    <div id="age" style="width: 600px;height:400px;"></div>
</div>
</body>

<script type="text/javascript">
    // 性别统计图
    // 基于准备好的dom，初始化echarts实例
    var sexChart = echarts.init(document.getElementById('sex'));
    $.get("/messagebook/selectSex", function (data) {
        console.log(data.data[1])
        sexChart.setOption({
            title: {
                text: '患者年龄分布统计图',
                subtext: '男&女',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value: data.data[0],
                            name: '男'
                        },
                        {
                            value: data.data[1],
                            name: '女'
                        },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]

        })
    })

    //    年龄统计图
    var ageChart = echarts.init(document.getElementById('age'));
    $.get("/messagebook/selectByAge", function (data) {
        ageChart.setOption({
            title: {
                text: '患者年龄统计数据'
            },
            tooltip: {},
            legend: {},
            xAxis: {
                data: ["0岁-20岁", "20岁-40岁", "40岁-60岁", "60岁以上"]
            },
            yAxis: {},
            series: [
                {
                    name: '年龄',
                    type: 'bar',
                    data: data.data
                },

            ]
        });
    })
</script>
<style>
    #age {
        float: left;
    }

    #sex {
        float: left;
        left: 50px;
    }
</style>
</html>